<template>
  <div class="masage">
    <div class="singer_info">
      <div class="img_i">
        <img :src="singer_str.imgurl" alt="" />
      </div>
      <div class="right_text">
        <div class="singer_name">
          <h4>{{ singer_str.singername }}</h4>
          <span class="time">入驻艺人</span>
        </div>
        <a href="#"><span class="time">+关注</span></a>
      </div>
    </div>

    <div class="singer_sort_info">
      <span :class="{ line_w: sort_line == 0 }" @click="click_sort(0)">
        <span>精选</span>
        <span></span>
      </span>
      <span :class="{ line_w: sort_line == 1 }" @click="click_sort(1)">
        <span>专辑</span>
        <span></span>
      </span>
      <span :class="{ line_w: sort_line == 2 }" @click="click_sort(2)">
        <span>MV</span>
        <span></span>
      </span>
      <span :class="{ line_w: sort_line == 3 }" @click="click_sort(3)">
        <span>资料</span>
        <span></span>
      </span>
    </div>

    <!-- 共用组件 -->
    <song_list :singer_song="singer_song" v-show="sort_line==0?true:false" />
    <album_list :album_list="singer_album" v-show="sort_line==1?true:false"/>
    <mv_list :mv_list="singer_mv" v-show="sort_line == 2?true:false"/>
    <div class="intro" v-show="sort_line==3?true:false">
      <h4>基本介绍</h4>
      <div class="text">
        <p>
          {{ singer_str.intro }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      //歌手info的显示与隐藏
      sort_line: 0,
    };
  },
  mounted() {
    this.getdata();
  },
  
  methods: {
    async getdata() {
      await this.$store.dispatch("singer_info", this.$route.query.singerid);
      await this.$store.dispatch("singer_song", {
        indentify: this.$route.query.indentify,
        singerid: this.$route.query.singerid,
      });
    },
    //获取专辑、mv
    async click_sort(index) {
      if (index == 1) {
        await this.$store.dispatch("singer_album", this.$route.query.singerid);
      } else if (index == 2) {
        await this.$store.dispatch("singer_mv", this.$route.query.singerid);
      }
      this.sort_line = index;
    },   
  },

  computed: {
    ...mapState({
      //歌手资料
      singer_str: (state) => state.singer.singer_info,
      //歌曲
      singer_song: (state) => state.singer.singer_song,
      // 专辑
      singer_album: (state) => state.singer.singer_album,
      //mv
      singer_mv: (state) => state.singer.singer_mv,
      mv_play: (state) => state.song.mv_play.sq,
    }),
  },
};
</script>

<style lang="less">
.masage {
  display: flex;
  width: 1000px;
  margin: 0 auto;
  flex-wrap: wrap;
  position: relative;
  .singer_info {
    display: flex;
    margin-top: 20px;
    margin-bottom: 10px;
    .img_i {
      width: 200px;
      img {
        border-radius: 100px;
        box-shadow: -2px 4px 3px 0px #e1e1e1;
      }
    }
    .right_text {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-top: 20px;
      padding-bottom: 20px;
      padding-left: 20px;
      .singer_name {
        span {
          font-size: 12px;
          color: #858585;
        }
      }
      a {
        width: 100px;
        text-align: center;
        line-height: 40px;
        height: 40px;
        background-color: #fd7471;
        border-radius: 20px;
        color: #fff;
        span {
          font-size: 16px;
        }
      }
    }
  }

  .singer_sort_info {
    display: flex;
    margin-right: 600px;
    justify-content: space-between;
    margin-bottom: 10px;
    span {
      cursor: pointer;
      width: auto;
    }
    .line_w {
      span:nth-child(1) {
        font-weight: bold;
        display: block;
        margin-bottom: 3px;
      }
      span:nth-child(2) {
        display: flex;
        width: 10px;
        border-radius: 1.5px;
        height: 3px;
        background-color: #00a9ff;
        margin: 0 auto;
      }
    }
  }
  //歌手歌曲列表样式
  .song_info {
    // 歌曲头部
    .tittle {
      display: flex;
      font-size: 14px;
      color: #858585;
      margin-bottom: 15px;
      p:nth-child(1) {
        flex: 6;
      }
      p:nth-child(2) {
        flex: 3.5;
      }
      p:nth-child(3) {
        flex: 0.5;
        text-align: flex-end;
      }
    }
    .song_info_all {
      .song_ii {
        height: 50px;
        font-size: 14px;
        display: flex;
        align-items: center;
        border-top: 0.1px solid #edeef1;
        .info_center {
          flex: 6;
          display: flex;
          .info_center_left {
            display: flex;
            justify-content: left;
            align-items: center;
            .song_name {
              width: 100%;
              overflow: hidden;
            }
            span {
              cursor: pointer;
              width: 20px;
              margin-right: 15px;
            }
          }
          .info_center_right {
            display: flex;
            justify-content: end;
            padding-right: 10px;
            span {
              cursor: pointer;
              width: 20px;
              margin-left: 5px;
              margin-right: 5px;
              text-align: center;
              padding-top: 2px;
            }
          }
        }
        a {
          color: #000;
        }
        .info_center_song {
          flex: 3.5;
        }
        .play_ico {
          cursor: pointer;
          flex: 0.5;
          text-align: end;
        }
      }
    }
  }
  //歌手资料样式
  .intro {
    h4 {
      margin-bottom: 10px;
    }
    p {
      font-size: 14px;
      color: #8d8d8d;
      margin-bottom: 50x;
    }
  }
}
</style>